<template>
  <div class="ml-[325px] mt-[35px] user-setting">
    <div>
      <div class="flex mb-[14px] items-center">
        <img class="w-[24px] h-[24px]" :src="topic" alt="" srcset="" />
        主题
      </div>
      <div class="topic">
        <div
          class="topic-item cursor-pointer"
          :class="{ active: isTopic === i }"
          @click="isTopic = i"
          v-for="(topic, i) in topicList"
          :key="i"
        >
          <div class="img">
            <img class="w-[74px] h-[74px]" :src="topic.icon" alt="" srcset="" />
          </div>
          <div class="text-center mt-[12px]">{{ topic.name }}</div>
        </div>
      </div>
    </div>
    <div class="flex mt-[66px] items-center">
      <img class="w-[24px] h-[24px]" :src="more" alt="" srcset="" />
      更多设置
    </div>

    <div class="card mt-[14px] flex items-center justify-between">
      <span>对话大师时间显示</span>

      <el-switch v-model="isTime" />
    </div>
    <div class="card mt-[14px] flex items-center justify-between">
      <span>对话记录</span>
      <div class="flex items-center cursor-pointer" @click="onClear">
        <img class="w-[16px] h-[16px]" :src="clear" alt="" srcset="" /><span
          class="ml-[7px] text-[14px] text-[var(--color-text-base)]"
          >一键清空</span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import topicS from "@/assets/images/user/topic-s.png";
import topic from "@/assets/images/user/topic.png";
import clear from "@/assets/images/user/clear.png";
import more from "@/assets/images/user/more.png";
import topicQ from "@/assets/images/user/topic-q.png";
import topicG from "@/assets/images/user/topic-g.png";
import { useSessionList } from "@/composables/useSessionList";
const { sessionClear } = useSessionList();
const isTopic = ref(0);
const isTime = ref(true);
const topicList = ref([
  {
    name: "深色",
    icon: topicS,
  },
  {
    name: "浅色",
    icon: topicQ,
  },
  {
    name: "跟随系统",
    icon: topicG,
  },
]);

const onClear = async () => {
  try {
    const confirm = await feedback.confirm("确定要清空对话记录吗？", "提示");
    if (confirm === "confirm") {
      await sessionClear();
      feedback.msgSuccess("已清空");
    }
  } catch (error) {}
};
</script>
<style lang="scss" scoped>
.topic {
  display: flex;
  &-item {
    margin-right: 47px;
    color: var(--color-text-base);
    .img {
      border: 2px solid var(--el-bg-color-page);
      overflow: hidden;
      border-radius: 10px 10px 10px 10px;
    }
  }

  .active {
    color: #fff;
    .img {
      border: 2px solid var(--el-color-primary);
    }
  }
}

.card {
  width: 550px;
  height: 41px;
  background: var(--el-bg-color-base);
  border-radius: 8px 8px 8px 8px;
  padding: 0 28px 0 8px;
  font-size: 14px;
  color: var(--color-btn-text);
}
</style>
